<template>
  <div class="box-main">
    <div class="header">
      <div class="header-close">
        <img class="header-close-img" src="@/assets/images/ApplyFor/icon2.png" alt="" />
        <p class="header-close-text">拒绝</p>
      </div>
      <div class="header-name">密友申请</div>
    </div>
    <div class="content">
      <div class="content-avatar">
        <img class="content-avatar-img" src="@/assets/images/comm/avatar.png" alt="" />
        <img class="content-avatar-tag" src="@/assets/images/OpenCloseFriend/icon3.png" alt="" />
      </div>
      <div class="content-name">小兔姐姐</div>
    </div>
    <div class="list">
      <div class="list-item">
        <div class="list-item-value">
          <p class="list-item-value-num">100</p>
          <p class="list-item-value-day">天</p>
        </div>
        <p class="list-item-label">已成为好友</p>
      </div>
      <div class="list-item">
        <div class="list-item-value">
          <p class="list-item-value-num">3000</p>
        </div>
        <div class="list-item-label">
          <img class="list-item-label-icon" src="@/assets/images/ApplyFor/icon3.png" alt="" />
          <p>亲密值</p>
        </div>
      </div>
    </div>
    <div class="btn">同意</div>
  </div>
</template>
<style lang="scss" scoped>
.box-main {
  padding: 5.64rem 3.08rem;
  box-sizing: border-box;
  background-image: url('@/assets/images/ApplyFor/icon1.png');
  background-size: 100% 103.08rem;
  background-repeat: no-repeat;
  position: relative;

  .header {
    display: flex;
    align-items: center;

    &-close {
      padding: 1.03rem;
      background: #FFE0DD;
      border-radius: 0.77rem 0.77rem 0.77rem 0.77rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.08rem;
      color: #FF3825;
      line-height: 3.08rem;
      display: flex;
      align-items: center;

      &-img {
        width: 3.08rem;
        height: 3.08rem;
        display: block;
      }

      &-text {
        margin-left: 1.03rem;
      }
    }

    &-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 4.62rem;
      color: #333333;
      line-height: 6.41rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 7.18rem;

    &-avatar {
      width: 16.41rem;
      height: 16.41rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      position: relative;
      background: linear-gradient(90deg, rgba(137.29756146669388, 78.0554647743702, 226.16071790456772, 1), rgba(78.0554647743702, 80.52388831973076, 226.16071790456772, 1));

      &-img {
        width: 15.2rem;
        height: 15.2rem;
        border-radius: 50%;
      }

      &-tag {
        width: 8.21rem;
        height: 3.08rem;
        display: block;
        position: absolute;
        bottom: -1rem;
      }
    }

    &-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 4.1rem;
      color: #333333;
      line-height: 4.1rem;
      margin-top: 3.08rem;
    }
  }

  .list {
    display: flex;
    justify-content: center;
    gap: 0 2.56rem;
    margin-top: 7.44rem;

    &-item {
      width: 42.05rem;
      height: 24.1rem;
      background: linear-gradient(180deg, #FFF6F4 0%, #FAF0E1 100%);
      border-radius: 2.56rem 2.56rem 2.56rem 2.56rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      &-value {
        display: flex;
        align-items: center;

        &-num {
          font-family: Roboto, Roboto;
          font-weight: 500;
          font-size: 6.15rem;
          color: #E4841C;
          line-height: 6.15rem;
        }

        &-day {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 2.56rem;
          color: #E4841C;
          line-height: 2.56rem;
          margin-left: 0.51rem;
        }
      }

      &-label {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 3.59rem;
        color: #E4841C;
        line-height: 3.59rem;
        margin-top: 1.54rem;
        display: flex;
        align-items: center;

        &-icon {
          width: 3.59rem;
          height: 3.08rem;
          display: block;
          margin-right: 1.03rem;
        }
      }

      &:nth-child(2) {
        background: linear-gradient(180deg, #FFF7FB 0%, #FFE7FA 100%);

        .list-item-value-num {
          color: #ED59A3;
        }

        .list-item-label {
          color: #ED59A3;
        }
      }
    }
  }

  .btn {
    width: 86.67rem;
    height: 12.82rem;
    background: #DC376B;
    border-radius: 2.56rem 2.56rem 2.56rem 2.56rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 4.1rem;
    color: #FFFFFF;
    line-height: 12.82rem;
    text-align: center;
    margin-top: 5.13rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>